<template>
  <basic-layout show-tab-bar>
    <custom-navbar title="首页" />

    <div class="m-[15px]">选择模版</div>
    <nut-row type="flex" flex-wrap="wrap">
      <nut-col v-for="(item, index) in baseStyleList" :key="index" :span="12" @click="selectStyle(item.id)">
        <div class="flex-content">
          <div class="style-wrapper">
            <img :src="item.cover" mode="widthFix" />

            <div class="style-name">{{ item.styleName }}</div>
          </div>
        </div>
      </nut-col>
    </nut-row>
  </basic-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { styleList } from '@/api/styles';
import type { StyleModelVO } from '@/api/styles/type';
const baseStyleList = ref<StyleModelVO[]>();

const getStyleList = async () => {
  const res = await styleList();
  baseStyleList.value = res.success;
};

getStyleList();

const selectStyle = (styleId: string) => {
  Taro.navigateTo({
    url: `/package/gen-upload/index?id=${styleId}`
  });
};

/** 设置页面属性 */
definePageConfig({
  navigationBarTitleText: '首页'
});
</script>
<style>
.style-wrapper {
  border: 1px solid #fff;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}

.style-wrapper.cur {
  border: 1px solid #ff0000;
}
.style-name {
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 5px;
}
.tab-pane-height {
  max-height: 400px;
}
</style>
